<template>
  <div class="shortChain">
    <!-- 短链导航菜单栏 -->
    <ShortChainMenu v-if='data.menuShow' :tabClick="tabClick" :menuList='data.menuList' :tabColor='tabColor'
      :changetabColor="changetabColor" :closeShortChainMain="closeShortChainMain"
      :getGroupListData='getGroupListData' />
    <div class="shortChain_left" v-if='!data.menuShow' />
    <!-- 短链主要内容 -->
    <ShortChainMain :shortChainList='data.shortChainList' :shortChainListTotal="data.shortChainListTotal"
      :deleteShortChainHandle="deleteShortChainHandle" :changeShortChainHandle="changeShortChainHandle"
      :addShortChainData='addShortChainData' :paginationHandle="paginationHandle"
      :shortChainPagination="shortChainPagination" :listShow="data.listShow" />
  </div>
</template>

<script setup>
import ShortChainMain from './components/ShortChainMain.vue'
import ShortChainMenu from './components/ShortChainMenu.vue'
import { onMounted, reactive, ref } from 'vue'
import { getGroupList } from '../../api/linkServer'
import { getShortChain, changeShortChain, deleteShortChain, addShortChain } from '../../api/linkServer'
import dayjs from 'dayjs'
import { message } from 'ant-design-vue';

/**
 * 数据定义
 */
const data = reactive({
  menuList: [],
  menuShow: false,
  listShow: false,
  shortChainList: [],
  shortChainListTotal: ''
})

const closeShortChainMain = () => {
  data.listShow = false
}

/**
 * 获取全部分组列表
 */
const getGroupListData = async () => {
  const res = await getGroupList()
  if (res.code === 0) {
    data.menuList = res.data
    data.menuShow = true
  } else if (res.code === -1) {
    message.info(res.msg || '获取分组列表失败')
    data.menuList = []
    data.menuShow = true
  }
}

onMounted(() => {
  getGroupListData()
})

/**
 * tab相关逻辑
 */
const tabColor = ref(null)  //选中tab颜色
const groupId = ref(null)   //选中分组id
const shortChainPagination = ref(1)  //分页默认展示页数

//menu菜单tab切换
const tabClick = (val) => {
  shortChainPagination.value = 1
  if (tabColor.value == val) {
    return
  }
  tabColor.value = val
  groupId.value = data.menuList[val].id
  getShortChainData({ id: data.menuList[val].id })
}

//去除tab选中颜色
const changetabColor = () => {
  tabColor.value = null
}

/**
 * 获取短链列表数据
 */
// 表格时间展示数据格式处理，分离显示URL和跳转URL
const urlListhandle = (originalUrl, domain, code) => {
  // 处理原始URL，分割出需要的部分
  const originalUrlPart = originalUrl.split('&')[1] || originalUrl;
  // 显示用的完整URL（包含domain，如g1.fit）
  const displayUrl = `${domain}/${code}`;
  // 跳转用的URL（不包含domain，仅code部分）
  const redirectUrl =`http://localhost:8888/link-server/${code}`;
  
  return [originalUrlPart, displayUrl, redirectUrl];
}

const getShortChainData = async (val) => {
  const res = await getShortChain({ page: val.page || 1, size: 10, groupId: val.id })
  if (res.code === 0) {
    const list = res.data.current_data.map((item, index) => {
      // 解构处理后的URL数据
      const [originalUrlPart, displayUrl, redirectUrl] = urlListhandle(item.originalUrl, item.domain, item.code);
      
      return {
        groupId: item.groupId,
        code: item.code,
        mappingId: item.id,
        key: index + 1,
        name: item.title,
        originalUrlPart: originalUrlPart,  // 原始URL部分
        displayUrl: displayUrl,            // 显示用的完整短链
        redirectUrl: redirectUrl,          // 跳转用的短链（不含g1.fit）
        time: dayjs(item.time).format('YYYY/MM/DD HH:mm:ss')
      }
    })
    // 短链列表
    data.shortChainList = list
    // 短链列表总数
    data.shortChainListTotal = res.data.total_record
    data.listShow = true
  } else if (res.code === -1) {
    // 处理没有短链的情况
    data.shortChainList = []
    data.shortChainListTotal = 0
    data.listShow = true
    message.info(res.msg || '当前分组下没有短链') // 显示提示信息
  } else {
    // 处理其他错误情况
    data.shortChainList = []
    data.shortChainListTotal = 0
    data.listShow = true
    message.error(res.msg || '获取短链列表失败')
  }
}

/**
 * 修改短链列表数据
 */
const changeShortChainHandle = (val) => {
  data.shortChainList[val.index].name = val.name
  changeShortChainData(val)
}

//修改短链接口
const changeShortChainData = async (val) => {
  const res = await changeShortChain({
    groupId: data.shortChainList[val.index].groupId,
    mappingId: data.shortChainList[val.index].mappingId,
    title: val.name,
    domainId: 1,
    domainType: 'OFFICIAL'
  })
  if (res.code === 0) {
    message.success('修改成功！')
  } else if (res.code === -1) {
    message.info(res.msg || '修改短链失败')
  } else {
    message.error(res.msg || '修改短链失败')
  }
}

/**
 * 删除短链列表数据
 */
const deleteShortChainHandle = (val) => {
  deleteShortChainData(val)
  data.shortChainList = data.shortChainList.filter((i, index) => {
    return !(index === val)
  })
}

//删除短链接口
const deleteShortChainData = async (val) => {
  const res = await deleteShortChain({
    groupId: data.shortChainList[val].groupId,
    mappingId: data.shortChainList[val].mappingId,
    code: data.shortChainList[val].code
  })
  if (res.code === 0) {
    message.success('删除成功！')
  } else if (res.code === -1) {
    message.info(res.msg || '删除短链失败')
  } else {
    message.error(res.msg || '删除短链失败')
  }
}

/**
 * 创建短链列表
 */
const addShortChainData = async (val) => {
  const res = await addShortChain({
    groupId: groupId.value,
    title: val.inputTitle,
    originalUrl: val.inputUrl,
    domainId: 1,
    domainType: 'OFFICIAL',
    expired: val.expired
  })
  if (res.code === 0) {
    message.success('创建成功！')
    getShortChainData({ id: groupId.value })
  } else if (res.code === 600102) {
    message.error('流量不足，扣减失败')
  } else if (res.code === -1) {
    message.info(res.msg || '创建短链失败')
  } else {
    message.error(res.msg || '创建短链失败')
  }
}

/**
 * 分页切换
 */
const paginationHandle = (val) => {
  shortChainPagination.value = val
  getShortChainData({ page: val, id: groupId.value })
}
</script>

<style lang='less' scoped>
@import '~@/style/commonColor.less';

.shortChain {
  width: 1200px;
  display: flex;
  flex: 1;
  margin: auto;
  overflow-y: auto;

  .shortChain_left {
    width: 200px;
    background-color: #fff;
    flex-shrink: 0;
  }
}
</style>
